<template>
  <div class="login">
    <!-- 登录页面 -->
    <div>
      <div class="header">NVIDIA Account Portal</div>
      <div class="body el-main">
        <div class="el-container">
          <div class="card">
            <div class="icon-head">
              <label>
                <span class="iconfont icon-tubiaonvidia-copy"></span>
                <span><img src="../assets/img/nvidia.png" alt="" /></span>
              </label>
              <div>您的NVIDIA账户</div>
            </div>
            <div class="log-body">
              <div class="hint-title">
                <label>输入您的账号或创建一个新用户</label>
              </div>
            </div>
            <!-- <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                prop="text"
                label="邮箱"
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
            </el-form>
            <el-button  @click="submitForm('ruleForm')"
              >提交</el-button
            > -->
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              size="big"
            >
              <el-form-item label="用户名" prop="name">
                <el-input
                  type="text"
                  v-model="ruleForm.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
            <div class="saoma">
              <label>
                <span class="r1"></span>
                <span>或者</span>
                <span class="r1"></span>
              </label>
              <div class="btn">
                <el-button>
                  <i class="iconfont icon-tubiaoweixin1"></i>
                  <span>使用WeChat登录</span>
                </el-button>
                <el-button>
                  <i class="iconfont icon-tubiaoQQ"></i>
                  <span>使用QQ登录</span>
                </el-button>
                <el-button>
                  <i class="iconfont icon-tubiaopingguo"></i>
                  <span>使用Apple登录</span>
                </el-button>
              </div>
              <el-link>显示更多</el-link>
            </div>
            <div class="text">
              <span>
                继续操作，即表示我同意
                <el-link>NVIDIA 帐户使用条款</el-link>
                和
                <el-link>隐私政策</el-link>
              </span>
            </div>
            <el-link>登录帮助</el-link>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="container">
          <div class="zhushi">
            <div class="row1">
              <el-dropdown size="medium">
                <span class="el-dropdown-link">
                  简体中文<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>中文</el-dropdown-item>
                  <el-dropdown-item>英文</el-dropdown-item>
                  <el-dropdown-item>日本语</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div class="grid-content">
                <el-link>隐私政策</el-link>
                <el-link>法律信息</el-link>
                <el-link>联系我们</el-link>
              </div>
            </div>
            <div class="row2">
              <span>版权所有 © 2022 NVIDIA Corporation</span>
              <span class="sg"></span>
              <el-link>京公网安备11010502036963</el-link>
              <span class="sg"></span>
              <el-link>京ICP备18033986号</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };

    var validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
        age: "",
      },
      rules: {
        name: [{ validator: validatename, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },

  mounted() {
    // this.getRegister();
  },
  watch: {},
  methods: {
    // getRegister(){
    //   let url = `/register/`
    //   console.log(this);
    //   console.log(this.$refs.fieldValue);
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm.name);
          let params = `uname=${this.ruleForm.name}&upwd=${this.ruleForm.pass}`;
          console.log(params);
          this.axios.post("/login", params).then((res) => {
            console.log(res);
            if (res.data["code"] == 200) {
              localStorage.clear();
              localStorage.setItem("info", 1);
              localStorage["flag"] = 1;
              // localStorage.setItem('flag',1)
              sessionStorage.clear();
              // sessionStorage['userid']=JSON.stringify(res.data.userInfo.id)
              sessionStorage.setItem(
                "userid",
                JSON.stringify(res.data.upwd)
              );
              sessionStorage["token"] = JSON.stringify(res.data.token);
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.$router.push("/index_product");
            } else {
              this.$message("用户名或密码错误");
              // alert('用户名或者密码错误错误')
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped src='../assets/css/login.css'></style>
<style lang="scss" scoped>
</style>